<template>
  <view>
    <view class="top-fixed">
      <view class="top-search clearfix">
        <u-icon name="search" size="32" color="#fb5904"></u-icon>
        <input
          class="top-input"
          confirm-type="search"
          placeholder-class="input-pl"
          placeholder="商品名称、编码"
          type="text"
          v-model="search_form.keyword"
          @confirm="searchData"
        />
        <u-icon
          name="close"
          size="32"
          color="#bbb"
          v-if="search_form.keyword"
          @click="clearKeyword('keyword')"
        ></u-icon>
      </view>
      <view class="search-sel">
        <view class="search-sel-li">
          <!-- StatusSel 替换为 picker -->
          <picker
            :range="price_status_list"
            range-key="label"
            @change="pickerStatusChange"
          >
            <view class="picker-view">
              <text class="sel-label sel-name" v-if="effectiveStatusName">{{
                effectiveStatusName
              }}</text>
              <text class="sel-label" v-else>调价状态</text>
              <u-icon
                class="ic-down"
                name="arrow-down"
                size="16"
                color="#fb5904"
              ></u-icon>
            </view>
          </picker>
        </view>
        <view class="search-sel-li" @click="openTime('start')">
          <picker
            mode="date"
            :value="startTime"
            @change="onDateChange('start', $event)"
          >
            <view>
              <text class="sel-label sel-name" v-if="startTime">{{
                startTime
              }}</text>
              <text class="sel-label" v-else>起始日期</text>
              <i
                v-if="startTime"
                class="ibonfont ibonic_searchclosed"
                @click.stop="clearKeyword('startTime')"
              ></i>
              <u-icon
                v-else
                name="arrow-down"
                size="16"
                color="#fb5904"
              ></u-icon>
            </view>
          </picker>
        </view>
        <view class="search-sel-li" @click="openTime('end')">
          <picker
            mode="date"
            :value="endTime"
            @change="onDateChange('end', $event)"
          >
            <view>
              <text class="sel-label sel-name" v-if="endTime">{{
                endTime
              }}</text>
              <text class="sel-label" v-else>结束日期</text>
              <i
                v-if="endTime"
                class="ibonfont ibonic_searchclosed"
                @click.stop="clearKeyword('endTime')"
              ></i>
              <u-icon
                v-else
                name="arrow-down"
                size="16"
                color="#fb5904"
              ></u-icon>
            </view>
          </picker>
        </view>
      </view>
    </view>
    <view class="container-view">
      <scroll-view scroll-y class="list-ul">
        <view v-for="(item, index) in adjust_price_form" :key="index">
          <view class="list-item clearfix">
            <view>
              <view class="list-label clearfix">
                <view class="float_left list-name">{{ item.goodsName }}</view>
                <button
                  class="float_right status-text effective-btn"
                  v-if="item.effectiveStatus === 1"
                  @click="effectivePrice(item)"
                >
                  <i
                    class="ibonfont ibonzhinengtiaojia"
                    style="padding-right: 10upx"
                  ></i>
                  生效
                </button>
                <view class="float_right status-text" v-else>已生效</view>
              </view>
              <view class="list-cont">
                <view class="clearfix">
                  <text class="float_left">编码：{{ item.no }}</text>
                </view>
                <view>调价日期：{{ $utils.formatDate(item.createTime) }}</view>
                <view>调价人：{{ item.createUserName }}</view>
                <view>相关店铺： {{ item.shopName }}</view>
                <view>
                  <view class="clearfix" @click="openPrice(item)">
                    <view class="float_left">调整后价格：</view>
                    <view class="float_right">展开</view>
                  </view>
                  <view v-if="item.isopen">
                    <div
                      v-for="(itemP, indexP) in item.salePrice"
                      :key="indexP"
                      class="clearfix price-view"
                    >
                      <span class="price-label">{{ itemP.unitName }}</span>
                      <text
                        v-for="(itemU, indexU) in itemP.specGroup"
                        :key="indexU"
                      >
                        _{{ itemU.specValueName }}
                      </text>
                      <div
                        v-if="itemP.enabledLadder === 0"
                        class="ladder-price-outul"
                      >
                        <span style="margin-left: 10px" class="ladprice-span">{{
                          $utils.formattedNumber(itemP.salePrice)
                        }}</span>
                      </div>
                      <view v-else class="ladder-price-outul">
                        <div class="ladder-price-ul">
                          <p
                            v-for="(itemL, indexL) in itemP.ladderPrice"
                            :key="indexL"
                            class="ladprice-p"
                          >
                            <span class="ladprice-span">{{ itemL.from }}</span>
                            -
                            <span class="ladprice-span">{{
                              indexL === itemP.ladderPrice.length - 1
                                ? "∞"
                                : itemL.to
                            }}</span>
                            <span class="ladprice-span"
                              >¥{{ itemL.price }}</span
                            >
                          </p>
                        </div>
                      </view>
                    </div>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-if="loading_status !== 'more'" class="load-more-view">
          <text v-if="loading_status === 'loading'">加载中...</text>
          <text v-else-if="loading_status === 'noMore'">没有更多了</text>
        </view>
      </scroll-view>
    </view>
    <button class="add-btn" @click="goPage('/pagesB/goods/AdjustPriceAdd')">
      新增调价单
    </button>
  </view>
</template>

<script>
export default {
  components: {},
  onShareAppMessage(options) {},
  data() {
    return {
      user_name: uni.getStorageSync("user_name") || "",
      effectiveStatusName: "",
      timeType: "",
      detalutTime: "",
      startTime: "",
      endTime: "",
      adjust_price_form: [],
      pageSize: 10,
      page: 1,
      pageTotal: 0,
      search_form: {
        keyword: "",
        startTime: "",
        endTime: "",
        effectiveStatus: "",
      },
      loading_status: "noMore",
      price_status_list: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "已生效",
          value: 2,
        },
        {
          label: "未生效",
          value: 1,
        },
      ],
    };
  },
  onNavigationBarButtonTap() {
    this.goPage("/pages/goods/AdjustPriceAdd");
  },
  onShow() {
    this.searchData();
  },
  onPullDownRefresh() {
    this.searchData();
  },
  onReachBottom() {
    this.scrollLoading();
  },
  methods: {
    openPrice(item) {
      item.isopen = !item.isopen;
    },
    effectivePrice(row) {
      uni.showModal({
        title: "提示",
        content: "确定要将该调价单生效吗?",
        success: async (res) => {
          if (res.confirm) {
            const { err, data } = await this.$u.api.PriceAdjustmentEffective(
              row.id,
              {
                createTime: row.createTime,
                effectiveUserName: this.user_name,
              }
            );
            if (err) return;
            this.$u.toast("操作成功!");
            this.getAllSearch();
          }
        },
      });
    },
    openTime(type) {
      // 兼容旧逻辑，实际已用picker
      this.timeType = type;
    },
    onDateChange(type, e) {
      const date = e.detail.value;
      if (type === "start") {
        this.startTime = date;
        this.search_form.startTime = this.$utils
          ? this.$utils.dateToStamp(date + " 00:00:00")
          : date;
      } else {
        this.endTime = date;
        // 结束日期加上当天的秒数
        this.search_form.endTime = this.$utils
          ? this.$utils.dateToStamp(date + " 00:00:00") + 86399
          : date;
      }
      this.searchData();
    },
    // 状态搜索
    pickerStatusChange(e) {
      const idx = e.detail.value;
      const row = this.price_status_list[idx];
      this.search_form.effectiveStatus = row.value;
      this.effectiveStatusName = row.value ? row.label : "";
      this.searchData();
    },
    scrollLoading() {
      if (this.loading_status === "loading") return;
      if (this.pageTotal / this.pageSize > this.page) {
        this.page += 1;
        this.getAllSearch();
      } else {
        this.loading_status = "noMore";
      }
    },
    clearKeyword(key) {
      switch (key) {
        case "keyword":
          this.search_form.keyword = "";
          break;
        case "startTime":
          this.startTime = "";
          this.search_form.startTime = "";
          break;
        case "endTime":
          this.endTime = "";
          this.search_form.endTime = "";
          break;
      }

      this.searchData();
    },
    searchData() {
      this.page = 1;
      this.getAllSearch();
    },
    //  搜索
    async getAllSearch() {
      this.loading_status = "loading";
      const { err, data, pageTotal } = await this.$u.api.getAllSearch({
        keyword: this.search_form.keyword,
        startTime: this.search_form.startTime,
        endTime: this.search_form.endTime,
        effectiveStatus: this.search_form.effectiveStatus,
        page: this.page,
        pageSize: this.pageSize,
      });
      this.loading_status = "more";
      uni.stopPullDownRefresh();
      if (err) return;
      const cData = data;
      if (this.page === 1) {
        this.adjust_price_form = cData;
      } else {
        this.adjust_price_form = this.adjust_price_form.concat(cData);
      }
      this.adjust_price_form = this.adjust_price_form.map((item) => {
        return {
          ...item,
          isopen: false,
        };
      });
      this.pageTotal = pageTotal;
    },
    goPage(url) {
      uni.navigateTo({ url });
    },
  },
};
</script>
<style lang="scss">
$primary: #fb5904;

.top-fixed {
  background: #fff;
  box-shadow: 0 2upx 8upx rgba(34, 199, 4, 0.06);
  padding-bottom: 16upx;
  position: sticky;
  top: 0;
  z-index: 10;
}
.top-search {
  display: flex;
  align-items: center;
  padding: 24upx 24upx 0 24upx;
  background: #fff;
  border-radius: 0 0 16upx 16upx;
  .u-icon {
    margin-right: 12upx;
  }
  .top-input {
    flex: 1;
    height: 64upx;
    border: none;
    background: #f7f7f7;
    border-radius: 32upx;
    padding: 0 24upx;
    font-size: 30upx;
    color: #222;
    margin-right: 8upx;
  }
  .u-icon[name="close"] {
    margin-left: 8upx;
  }
}
.input-pl {
  color: #bbb;
}
.search-sel {
  display: flex;
  align-items: center;
  padding: 12upx 24upx 0 24upx;
  background: #fff;
  .search-sel-li {
    flex: 1;
    margin-right: 16upx;
    background: #f7f7f7;
    border-radius: 32upx;
    padding: 0 24upx;
    height: 56upx;
    display: flex;
    align-items: center;
    font-size: 28upx;
    color: #666;
    display: flex;
    justify-content: center;
    .picker-view {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .sel-label {
      color: #222;
      font-size: 28upx;
      margin-right: 8upx;
    }
    .sel-name {
      color: $primary;
      font-weight: 500;
    }
    .ic-down {
      margin-left: 4upx;
    }
    .u-icon {
      margin-left: 4upx;
    }
  }
  .search-sel-li:last-child {
    margin-right: 0;
  }
}
.container-view {
  background: #f7f7f7;
  padding: 10px;
  /* #ifdef H5*/
  height: calc(100vh - 230upx);
  /* #endif */
  /* #ifdef MP||APP-PLUS */
  height: calc(100vh - 86upx);
  /* #endif */
  //   transform: translateY(138upx);
}
.list-ul {
  .list-item {
    background: #fff;
    margin-bottom: 16upx;
    border-radius: 16upx;
    box-shadow: 0 2upx 8upx rgba(34, 199, 4, 0.04);
    padding: 24upx;
    .list-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .list-name {
        font-size: 32upx;
        color: #222;
        font-weight: 600;
        width: 460upx;
      }
      .status-text {
        font-size: 28upx;
        font-weight: 500;
        cursor: pointer;
      }
      .effective-btn {
        background: $primary;
        color: #fff !important;
        border: none;
        border-radius: 32upx;
        padding: 8upx 32upx;
        font-size: 28upx;
        font-weight: 500;
        box-shadow: 0 2upx 8upx rgba(251, 89, 4, 0.08);
        transition: background 0.2s;
        display: flex;
        align-items: center;
        &:active {
          background: #e04e00;
        }
        .ibonzhinengtiaojia {
          color: #fff !important;
        }
      }
    }
    .list-cont {
      margin-top: 12upx;
      font-size: 26upx;
      color: #666;
      .success-color {
        color: $primary;
      }
    }
  }
}
.price-view {
  padding: 10upx 0;
  border-bottom: 1upx solid #eee;
}
.price-view:last-child {
  border-bottom: 0 none;
  padding-bottom: 0;
}
.ladprice-span {
  color: #f56c6c;
  min-width: 50upx;
  height: 30upx;
  line-height: 30upx;
  display: inline-block;
  border: 1upx solid #eee;
  text-align: center;
  padding: 4upx;
  margin: 4upx 4upx 4upx 0;
  margin-right: 4upx;
}
.ladder-price-outul {
  width: 640upx;
  display: inline-block;
  .ladder-price-ul {
    display: flex;
    .ladprice-p {
      padding-bottom: 5upx;
      flex: 3;
      border-right: 1upx solid #999;
      margin-right: 4upx;
    }
    .ladprice-p:last-child {
      border-right: 0;
      margin-right: 0;
    }
  }
}
.price-label {
  width: 50upx;
  font-weight: 600;
  display: inline-block;
}
.add-btn {
  position: fixed;
  right: 40upx;
  bottom: 80upx;
  z-index: 99;
  background: $primary;
  color: #fff;
  border-radius: 50upx;
  padding: 20upx 60upx;
  font-size: 34upx;
  box-shadow: 0 4upx 16upx rgba(34, 199, 4, 0.18);
  border: none;
}
.load-more-view {
  text-align: center;
  color: #bbb;
  padding: 20upx 0;
  font-size: 28upx;
}
</style>
